<template>
    <div>
        <div>
            <h1 class="title">测评记录</h1>
        </div>
    </div>
    <div>
        <el-table  table-layout='auto'       highlight-current-row
            :data="qnList.slice((pagination.curPage - 1) * pagination.pageSize, pagination.curPage * pagination.pageSize)"
            border style="width: 100%">
            <el-table-column prop="id" label="ID" width="60" />
            <el-table-column prop="title" label="标题">
                <template #default="scope">
                    {{ scope.row.record.title }}
                </template>
            </el-table-column>
            <el-table-column prop="type" label="类型" width="100">
                <template #default="scope">
                    {{ scope.row.record.type }}
                </template>
            </el-table-column>
            <el-table-column prop="type" label="报告状态" width="110">
                <template #default="scope">
                    <el-tag v-if="scope.row.status == 0" type="warning">AI分析中</el-tag>
                    <el-tag v-else type="success">分析完成</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="type" label="测评时间" width="180">
                <template #default="scope">
                    {{ scope.row.updateTime.replace('T', ' ') }}
                </template>
            </el-table-column>
            <el-table-column label="问题数量" width="100">
                <template #default="scope">
                    {{ scope.row?.record?.questionList?.length }}
                </template>
            </el-table-column>
            <el-table-column label="问题类型">
                <template #default="scope">
                    {{ [...new Set(scope.row?.record?.questionList?.map((i) => { return i.typeCN }))].join(',') }}
                </template>
            </el-table-column>
            <el-table-column label="分数" width="60">
                <template #default="scope">
                    {{ scope.row?.report?.report?.score || 60 }}
                </template>
            </el-table-column>
            <el-table-column label="操作" width="200">
                <template #default="scope">
                    <el-button type="primary" text size="small"
                        @click="() => { this.$router.push(`/reviewQNRecord/${scope.row.id}`) }">查看</el-button>
                    <el-button type="primary" text size="small" :disabled="scope.row.status == 0"
                        @click="() => { this.$router.push(`/reportQN/${scope.row.id}`) }">报告</el-button>
                    <el-popconfirm confirm-button-text="确认" cancel-button-text="取消" width="200" title="删除后无法恢复，是否确认删除?"
                        @confirm="deleteQNRecordByID(scope.row)">
                        <template #reference>
                            <el-button type="danger" text size="small">删除</el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <div class="pagination">
        <el-pagination  v-model:current-page="pagination.curPage" v-model:page-size="pagination.pageSize"
            :page-sizes="[10, 25, 50, 100]" layout="total, sizes, prev, pager, next, jumper" :total="qnList.length" />
    </div>
</template>
<script>
import { useUserStore } from "../../store/userStore.js";
import { POST } from '../../util/axios.js'
export default {
    data() {
        return {
            qnList: [],
            pagination: {
                curPage: 1,
                pageSize: 10
            }
        }
    },
    methods: {
        async getQNRecordListByUser() {
            const userStore = useUserStore();
            let rs = await POST('/questionnaire/getQNRecordListByUser', 'POST', userStore.userInfo, false, null, false)
            this.qnList = rs.data
            console.log("获取用户回答的问卷结果:::", rs)
        },
        async deleteQNRecordByID(qn) {
            let rs = await POST('/questionnaire/deleteQNRecordByID', 'POST', { id: qn.id }, true, null, true)
            // this.qnList = rs.data
            console.log("删除用户自己创建的问卷结果:::", rs)
            if (rs.code == 200) {
                location.reload();
            }

        }
    },
    mounted() {
        this.getQNRecordListByUser()
    }
}
</script>
<style></style>